<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>抱团商家</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="keywords" content="抱团">
    <meta name="description" content="抱团">
    <script type="text/javascript" src="../common/js/base.js" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="../common/css/elementui.min.css">
    <link rel="stylesheet" type="text/css" href="../common/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../common/css/nanoscroller.css">
    <link rel="stylesheet" type="text/css" href="../common/css/swiper-bundle.min.css">
    <link rel="stylesheet" type="text/css" href="../common/css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type='text/javascript' src="../common/js/jquery.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/jquery.easing.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/html2canvas.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../common/js/layer/layer.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="../common/js/createjs.min.js" charset="UTF-8"></script> -->
    <script type="text/javascript" src="../common/js/wow.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="../common/js/city.js" charset="UTF-8"></script> -->
    <script type="text/javascript" src="../common/js/vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../common/js/vue-resource.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../common/js/axios.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/elementui.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/jquery.nanoscroller.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/swiper.animate.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/swiper-bundle.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<body>
<div class="wrapperbox orderpage hasmenu" id="app">
    <!-- 所有订单页 -->
    <div class="page">
        <span class="itempage" :class="{active:status===''}" @click="statusChange('')">所有订单</span>
        <span class="itempage" :class="{active:status==='used'}" @click="statusChange('used')">已核销订单</span>
        <span class="itempage" :class="{active:status==='paid'}" @click="statusChange('paid')">未核销订单</span>
    </div>

    <div class="ordermessage" v-for="order in list">
        <div class="messagelist">
            <div class="listnum">订单号：<h3>{{order.order_no}}</h3></div>
            <div class="state" v-if="order.use_status==='not_use'">
                <img src="images/green.png">
                <span style="background-color: green">未使用</span>
            </div>
            <div class="state" v-if="order.use_status==='used'">
                <img src="images/grey.png">
                <span style="background-color: grey">已使用</span>
            </div>
            <div class="state" v-if="order.use_status==='part_used'">
                <img src="images/red.png">
                <span style="background-color: red">剩余{{order.left_tickets}}张</span>
            </div>
        </div>
        <div class="messagelist">
            <div class="listmes">购买时间：<h3>{{order.create_date}}</h3></div>
            <div class="listmes">购买数量：<h3>{{order.quantity}}</h3></div>
        </div>
        <div class="messagelist_last">
            <div class="listmes">使用人：<h3>{{order.customer_name}}</h3></div>
            <div class="listmes">手机号：<h3>{{order.customer_mobile}}</h3></div>
        </div>
    </div>
</div>


<div class="footer">
    <div class="item">
        <a href="shophome.html">
            <img class="itemimg" src="images/nav_home.png">
            <p class="itemname">首页</p>
        </a>
    </div>
    <div class="item">
        <a href="activity.html">
            <img class="itemimg" src="images/nav_activity.png">
            <p class="itemname">活动及销售</p>
        </a>
    </div>
    <div class="item">
        <a href="order.html">
            <img class="itemimg" src="images/nav_order_active.png">
            <p class="itemname">订单</p>
        </a>
    </div>
    <div class="item">
        <a href="my.html">
            <img class="itemimg" src="images/nav_my.png">
            <p class="itemname">我的</p>
        </a>
    </div>
</div>

</body>
<script>
  $(function () {
    new Vue({
      el: '#app',
      data() {
        return {
          status: '',
          list: [],
        }
      },
      mounted() {
        wow = new WOW({
          animateClass: 'animated',
          offset: 0
        });
        wow.init();
        this.loadOrders()
      },
      methods: {
        statusChange: function (status) {
          this.status = status
          this.loadOrders()
        },
        loadOrders: function () {
          this.list = [];
          merchant_get('orders?status=' + this.status).then(res => {
            this.list = res
          })
        },
      }
    });
  })
</script>
</html>
